<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="css/login/user_login.css">
</head>

<link rel="stylesheet" href="css/userinfo/navbar.css"/>

<body>

<div class="container">
    <div class="header">
        <div class="left">
            <a href="#" style="font-size: xx-large">
                <span>Fruit</span>
                <img src="img/userinfoimg/logo-icon.png" alt="">
                <span class="light-font">福禄德水果</span>
            </a>
            <span>水果商店</span>
        </div>
        <div class="right">
            <a href="#">主页</a>
            <a href="#">关于我们</a>
            <a href="#">商店</a>
            <a href="#">店铺单</a>
            <a href="#">个人信息</a>
            <a href="#">联系我们</a>
            <a href="#" onclick="document.getElementById('id01').style.display='block'">登录</a>
        </div>
    </div>
</div>

<div id="id01" class="modal" >
    <!--<section id="content">-->
    <!--头部-->
    <div class="imgcontainer">
        <!-- 点击×号，隐藏模态框-->
        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
    </div>
    <div class="content-header clearfix">
        <a href="javascript:;" class="current">登录</a>
        <a href="javascript:;">注册</a>
    </div>
    <!--内容-->
    <div class="content-body">
        <!-- 登录 -->
        <div class="dom" style="display: block;">
            <form action="#">
                <div class="s1">
                    <h4>账号</h4><span id="usertip" style="color: red"></span>
                    <input name="user" type="text" placeholder="用户名/手机/邮箱">
                </div>
                <div class="s1">
                    <h4>密码</h4><span id="pwdtip" style="color: red"></span>
                    <input name="pwd" type="password" placeholder="请输入密码">
                </div>
                <div class="s2">
                    <input type="checkbox" id="rem">
                    <span>记住密码</span>
                </div><span id="logintip" style="color: red"></span>
                <input type="button" class="login-btn" value="登&nbsp;录">
            </form>
            <div class="dom-footer">
                <div class="login-another">
                    <span>请联系管理员：卢桂豆</span>
                    <!--<a href="#">找回密码</a>-->
                    <span>|</span>
                    <span>还没有注册帐号?</span>
                    <a href="#">立即注册</a>
                </div>

            </div>
        </div>
        <!-- 注册 -->
        <div class="dom">
            <form action="#">

                <div class="s1">
                    <h4>用户名</h4>
                    <input name="user1" type="text" placeholder="中、英文均可, 最长20个字符或10个汉字">
                </div>
                <div class="s1">
                    <h4>密码</h4>
                    <input name="pwd1" type="text" placeholder="6-30位英文、数字、符号, 区分大小写">
                </div>
                <div class="s1">
                    <h4>手机号码</h4><span id="phonetip" style="color: red"></span>
                    <input name="phone" type="text" placeholder="填写你的手机号码作为登录账户">
                </div>
                <div class="s1 msg-code">
                    <h4>短信验证码</h4>
                    <input name="msg" type="text" placeholder="填写短信验证码">
                    <input type="button" value="获取短信验证码">
                </div>

                <input type="button" class="logon-btn" value="注&nbsp;册">
            </form>

        </div>
    </div>
</div>

<div class="logo">
    <img src="img/userinfoimg/breadcrumb-1.jpg" class="img1" alt="">

    <div class="banner">
        <p style="font-size: xx-large;font-weight:lighter">我的&nbsp;<span style="color: limegreen">账户</span></p>

        <p style="font-size: small;font-weight: lighter;margin-top: 10px"><a href="#">主页</a>/我的账户</p>
    </div>
</div>

<div class="body">
    <!--<iframe src="iframe/personal_account.html" id="test" scrolling="no"></iframe>-->
    <iframe class="iframe" name="test" scrolling="no" src="iframe/viewpersonal.html"></iframe>
</div>
<div class="account">
    <div class="acc" style="border-bottom: 2px darkgrey dashed">
        <span style="font-size: x-large">我的</span>
        <span style="font-size: x-large;font-weight: bold">&nbsp;&nbsp;账户</span>
    </div>
    <div class="select">
        <ul>
            <li><img src="img/userinfoimg/deal.png" alt=""/><a target="test" href="iframe/viewpersonal.html">&nbsp;账户信息</a></li>
            <li><img src="img/userinfoimg/deal.png" alt=""/><a target="test" href="iframe/personal_account.html">&nbsp;修改信息</a></li>
            <!--<li><img src="img/userinfoimg/deal.png" alt=""/><a href="">&nbsp;更改密码</a></li>-->
            <li><img src="img/userinfoimg/deal.png" alt=""/><a target="test" href="iframe/addaddress.html">&nbsp;添加地址</a></li>
            <li><img src="img/userinfoimg/deal-1.png" alt=""/><a target="test" href="iframe/showaddress.html">&nbsp;地址簿</a></li>
            <li><img src="img/userinfoimg/deal-1.png" alt=""/><a href="">&nbsp;订单历史</a></li>
            <li><img src="img/userinfoimg/deal-1.png" alt=""/><a href="">&nbsp;评论和评分</a></li>
            <!--<li><img src="img/userinfoimg/deal-2.png" alt=""/><a href="">&nbsp;退货</a></li>-->
            <li><img src="img/userinfoimg/deal-2.png" alt=""/><a href="">&nbsp;。。。</a></li>
        </ul>
    </div>
</div>

<div class="bottom">
    <div class="bottomcontainer">
        <div class="intr">
            <ul>
                <li><a href="" style="font-size:x-large;font-weight: bold;color:black">福禄德水果店</a></li>
                <li>介绍</li>
                <li>地址</li>
                <li>电话</li>
            </ul>
        </div>
        <div class="detail">
            <ul>
                <li><a href="" style="font-size:x-large;font-weight: bold;color:black">福禄德水果信息</a></li>
                <li>。。。。</li>
                <li>。。。。</li>
                <li>。。。。</li>
                <li>。。。。</li>
            </ul>
        </div>

        <div class="detail">
            <ul>
                <li><a href="" style="font-size:x-large;font-weight: bold;color:black">我的账号</a></li>
                <li>。。。</li>
                <li>。。。</li>
                <li>。。。</li>
            </ul>
        </div>
    </div>
</div>

<script src="js/jquery-3.4.1.js"></script>

<!--<script>-->
    <!--//根据浏览器大小调整iframe高度-->
    <!--reSetSize();-->
    <!--window.onresize = reSetSize;-->
    <!--function reSetSize() {-->
        <!--var windowsHeight = window.innerHeight;-->
        <!--document.getElementById("content").style.height = (windowsHeight-200) + "px";-->
    <!--}-->
    <!--//根据浏览器大小调整iframe宽度-->
    <!--reSetSize();-->
    <!--window.onresize = reSetSize;-->
    <!--function reSetSize() {-->
        <!--var windowsWidth = window.innerWidth;-->
        <!--document.getElementById("content").style.width = (windowsWidth-200) + "px";-->
    <!--}-->
<!--</script>-->


<!--</section>-->
</div>
<script>

    window.onload = function () {
        // 1.1 获取需要的标签
        var as = document.getElementsByClassName('content-header')[0].getElementsByTagName('a');
        var contents = document.getElementsByClassName('dom');

        // 1.2 遍历
        for (var i = 0; i < as.length; i++) {
            // 1.2.1 取出单个对象
            var a = as[i];
            a.id = i;

            // 1.2.2 监听鼠标的移动事件
            a.onclick = function () {
                // 让所有的a的class都清除
                for (var j = 0; j < as.length; j++) {
                    as[j].className = '';
                    contents[j].style.display = 'none';
                }

                // 设置当前a的class
                this.className = 'current';
                // 从contents数组中取出对应的标签
                contents[this.id].style.display = 'block';
            }

        }
    }
</script>



</body>
</html>